<template>
  <view>
    <view class="password">
      <view class="content">
        <view class="welcome">
          <view class="text">
            <view> Hi~ </view>
            <view> 停简单欢迎您 </view>
          </view>
          <view class="img">
            <image src="../../static/image/login-pic.png"></image>
          </view>
        </view>
        <view class="form">
          <u-form :model="form" ref="uForm" class="swiper-box">
            <!-- 手机号 -->
            <u-form-item
              prop="phone"
              left-icon="phone-fill"
              :left-icon-style="leftIconStyle"
            >
              <u-input
                v-model="form.phone"
                maxlength="11"
                placeholder="请输入手机号"
              />
            </u-form-item>
            <!-- 验证码 -->
            <u-form-item
              prop="code"
              left-icon="email-fill"
              :left-icon-style="leftIconStyle"
            >
              <u-input v-model="form.code" placeholder="请输入验证码" />
              <view class="wrap">
                <u-toast ref="uToast"></u-toast>
                <u-verification-code
                  :seconds="seconds"
                  @start="start"
                  ref="uCode"
                  @change="codeChange"
                >
                </u-verification-code>
                <u-button @tap="getCode">{{ tips }}</u-button>
              </view>
            </u-form-item>
            <!-- 新密码 -->
            <u-form-item
              prop="password"
              left-icon="lock-fill"
              :left-icon-style="leftIconStyle"
            >
              <u-input
                v-model="form.password"
                type="password"
                :clearable="false"
                placeholder="请输入密码"
              />
            </u-form-item>
            <!-- 确认密码 -->
            <u-form-item
              prop="passwordCon"
              left-icon="lock-fill"
              :left-icon-style="leftIconStyle"
            >
              <u-input
                v-model="form.passwordCon"
                type="password"
                :clearable="false"
                placeholder="请确认密码"
              />
            </u-form-item>
          </u-form>
          <view class="tips">
            <view class="" @click="gotoLogin"> 马上登录 </view>
            <view class=""> 返回主页 </view>
          </view>
          <!-- 找回密码 -->
          <u-button type="primary" class="login-btn" @click="findPwd"
            >找回密码</u-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tips: '',
      // refCode: null,
      seconds: 60,
      form: {
        token: '',
        phone: '',
        code: '',
        password: '',
        passwordCon: '',
        // passwordCon: '123456789a'
      },

      leftIconStyle: {
        color: '#0081ff',
        fontSize: '40rpx',
      },
    }
  },
  methods: {
    findPwd() {},
    gotoLogin() {
      this.$u.route('pages/public/loginRegister')
    },
    start() {
      this.$u.toast('验证码位2468')
    },
    codeChange(text) {
      this.tips = text
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码',
        })
        setTimeout(() => {
          uni.hideLoading()
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送')
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start()
        }, 1000)
      } else {
        this.$u.toast('倒计时结束后再发送')
      }
    },
  },
  onLoad() {
    console.log(this.vuex_token)
  },
}
</script>

<style lang="scss">
.password {
  .content {
    width: 100%;

    .welcome {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 460rpx;
      width: 100%;
      background-color: $base-color;

      .text {
        color: #ffffff;
        font-size: 50rpx;
        margin: 0 0 110rpx 40rpx;
      }

      .img {
        image {
          width: 220rpx;
          height: 270rpx;
        }

        margin: 0 40rpx 80rpx 0;
      }
    }

    .form {
      height: 1150rpx;
      margin: -60rpx 20rpx 0 20rpx;
      background-image: url(../../static/image/login-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 900rpx;

      .swiper-box {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-content: space-around;
        width: 100%;
        height: 560rpx;
        padding: 0 50rpx 0 50rpx;
        // background-color: #007AFF;
      }

      .tips {
        display: flex;
        justify-content: space-around;
        color: $base-color;
      }

      .login-btn {
        margin-top: 60rpx;
        width: 85%;
        border-radius: 30rpx;
      }
    }
  }
}
</style>
